<%@ include file="/WEB-INF/jsp/include/include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="${ctx}styles/alvin.min.css" rel="stylesheet" media="screen" />
<link href="${ctx}styles/alvin.custom.css" rel="stylesheet" media="screen" />
<link href="${ctx}styles/ui.totop.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="${ctx}scripts/easing.js"></script>
<script type="text/javascript" src="${ctx}scripts/jquery.ui.totop.js"></script>
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://115.28.36.23:81/piwik/";
    _paq.push(['setDocumentTitle', document.title]);
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "1"]);
    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->
<noscript><p><img src="http://115.28.36.23:81/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<title>
	<fmt:message key="title" />
</title>
</head>
<body>
<div data-role="page" class="preview ui-shadow swatch">
<div data-role="header" data-form="ui-bar-a" data-theme="a" data-swatch="a" class="ui-header ui-bar-a">
	<a title=" Home " data-icon="home" data-role="button" data-theme="a" data-iconpos="notext" class="ui-btn-left ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a">
		<span class="ui-btn-inner ui-btn-corner-all">
			<span class="ui-btn-text"> Home </span>
			<span class="ui-icon ui-icon-home ui-icon-shadow" data-form="ui-icon"></span>
		</span>
	</a>
	<h1 tabindex="0" class="ui-title"><fmt:message key="home.title" /></h1>
	<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a">
		<span class="ui-btn-inner ui-btn-corner-all">
			<span class="ui-btn-text"> Navigation </span>
			<span class="ui-icon ui-icon-grid ui-icon-shadow" data-form="ui-icon"></span>
		</span>
	</a>
</div>
<!-- body -->
<div class="ui-content ui-body-a">
	<ul data-inset="true" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
		<li data-theme="a" data-swatch="a" data-form="ui-btn-up-a" class="ui-li ui-li-static ui-btn-up-a ui-first-child"><fmt:message key="home.purchase.name" /><font class="content">${merchandise.name}</font></li>
		<li data-theme="a" data-swatch="a" data-form="ui-btn-up-a" class="ui-li ui-li-static ui-btn-up-a"><fmt:message key="home.purchase.productPlace" /><font class="content">${merchandise.productPlace}</font></li>
		<li data-theme="a" data-swatch="a" data-form="ui-btn-up-a" class="ui-li ui-li-static ui-btn-up-a"><fmt:message key="home.purchase.spec" /><font class="content">${merchandise.spcification}</font></li>
		<li data-theme="a" data-swatch="a" data-form="ui-btn-up-a" class="ui-li ui-li-static ui-btn-up-a"><fmt:message key="home.purchase.productDate" /><font class="content"><fmt:formatDate pattern="yyyy-MM-dd" value="${merchandise.productDate}" /></font></li>
		<li data-theme="a" data-swatch="a" data-form="ui-btn-up-a" class="ui-li ui-li-static ui-btn-up-a"><fmt:message key="home.purchase.shelflife" /><font class="content">${merchandise.shelflife}</font></li>
		<li data-theme="a" data-swatch="a" data-form="ui-btn-up-a" class="ui-li ui-li-static ui-btn-up-a ui-last-child"><fmt:message key="home.purchase.qrType" /><font class="content">${merchandise.qrType.displayName}</font></li>
	</ul>
	<table data-role="table" id="track-table" data-mode="column" class="track table-stroke">
		<thead>
		<tr>
		<c:forEach items="${merchandise.locus}" var="locus">
			<th><fmt:message key="home.purchase.arrive" />${locus.department.area}</th>
		</c:forEach>
		</tr>
		</thead>
		<tbody>
			<tr>
			<c:forEach items="${merchandise.locus}" var="locus">
			<td><fmt:formatDate value="${locus.arriveDate}" pattern="yyyy-MM-dd HH:mm" /></td>
			</c:forEach>
			</tr>
		</tbody>
	</table>
	<p><fmt:message key="home.btn.report.click" /><a data-theme="a" href="${ctx}ciq.htm" data-form="ui-body-a" class="ui-link"><fmt:message key="home.btn.report" /></a>.</p>
	<div class="ui-grid-a">
	<div class="ui-block-a"><a href="http://www.alvinbaby.com" data-icon="home" data-role="button"><fmt:message key="home.btn.website" /></a></div>
	<div class="ui-block-b"><a href="http://m.rewards.alvinbaby.com" data-icon="star" data-role="button"><fmt:message key="home.btn.collectPoint" /></a></div>
	</div>
</div>
</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$().UItoTop({
				easingType : 'easeOutQuart'
			});
		});
	</script>
</body>
</html>